<template>
  <el-dialog v-model="visible" :title="title" width="1000" show-footer show-zoom resize :close-on-click-modal="false"
    :close-on-press-escape="false" @close="close">
    <template #default>
      <div class="title">基础信息</div>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="80" size="default"
        label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="任务名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入任务名称" :disabled="handleType == 'view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库" prop="warehouse">
              <SelectWarehouse class="w-full" v-model="form.warehouse" placeholder="请输入仓库" :multiple="true" :disabled="handleType == 'view'">
              </SelectWarehouse>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级" prop="priority_level">
              <div class="flex">

                <el-select class="w-full" v-model="form.priority_level" placeholder="请选择优先级" :disabled="handleType == 'view'">
                  <el-option v-for="item in options['system.headGoodConfig']?.[0].headGoodConfigPriorityLevel"
                    :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-switch class="ml-2" v-model="form.status" inline-prompt active-text="启用" inactive-text="禁用"
                  :active-value='1' :inactive-value='0' :disabled="handleType == 'view'"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="title">配货时间配置</div>

      <el-table :data="form.goods_time.detail" stripe style="width: 100%" height="300">
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="1" :disabled="handleType == 'view'">星期一</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Monday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="2" :disabled="handleType == 'view'">星期二</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Tuesday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="3" :disabled="handleType == 'view'">星期三</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Wednesday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="4" :disabled="handleType == 'view'">星期四</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Thursday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="5" :disabled="handleType == 'view'">星期五</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Friday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'" />
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="6" :disabled="handleType == 'view'">星期六</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Saturday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-checkbox v-model="form.goods_time.enable" :label="7" :disabled="handleType == 'view'">星期天</el-checkbox>
          </template>
          <template #default="{ row }">
            <el-time-picker v-model="row.Sunday" format="HH:mm" value-format="HH:mm" placeholder="请选择"
              style="width: 100px;" :disabled="handleType == 'view'"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" v-if="handleType != 'view'">
          <template #default="{ row, $index }">
            <div class="flex">
              <svg-icon class="text-lg mr-2" icon-class="add03" @click="addRow"></svg-icon>
              <svg-icon class="text-lg " icon-class="jian01" @click="deleteRow(row)" v-if="$index != 0"></svg-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getHeadGoodConfigDetail, saveHeadGoodConfig, updateHeadGoodConfig } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import SelectWarehouse from '@/components/SelectWarehouse'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
})

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {
    name: [{
      required: true, message: '请输入任务名称', trigger: 'blur'
    }],
    warehouse: [{
      required: true, message: '请选择所属仓库', trigger: 'blur'
    }],
    priority_level: [{
      required: true, message: '请选择优先级', trigger: 'blur'
    }],
  }
})
const { form, title, handleType, rules } = toRefs(data)

const statusMap = new Map([
  ['add', '新增'],
  ['edit', '编辑'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    priority_level: 1,
    status: 1,
    goods_time: {
      enable: [1, 2, 3, 4, 5, 6, 7],
      detail: [
        {}
      ]
    }
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getHeadGoodConfigDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const weekMap = new Map([
  ['Monday', 1],
  ['Tuesday', 2],
  ['Wednesday', 3],
  ['Thursday', 4],
  ['Friday', 5],
  ['Saturday', 6],
  ['Sunday', 7],
])

const addRow = () => {
  form.value.goods_time.detail.push({
    "Monday": "",
    "Tuesday": "",
    "Wednesday": "",
    "Thursday": "",
    "Friday": "",
    "Saturday": "",
    "Sunday": ""
  })
}

const deleteRow = (index) => {
  if (form.value.goods_time.detail.length <= 1) return
  form.value.goods_time.detail.splice(index, 1)
}

// const filterWeek = (val) => {

// }

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.id) {
        updateHeadGoodConfig(form.value)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      } else {
        saveHeadGoodConfig(form.value)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      }
    }
  })
}
const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}

.title {
  font-weight: bold;
  padding-left: 6px;
  position: relative;
  margin-bottom: 10px;
  font-size: 16px;
}

.title::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 5px;
  width: 2px;
  height: 14px;
  background: #3366F1;
}
</style>
